<template>
	<view>
		<view class="address-container">
			<view class="address-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="backPerson()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					选择地址
				</view>
			</view>
			<view class="address-content">
				<view class="address-box" v-for="(item, index) in displayAddressList" :key="index">
					<view class="address-card">
						<view class="address-list">
							<view class="address-item" @click="choose(item.id)">
								<view class="address-item-left-content">
									<uni-icons class="uncheckbox-icon" type="circle" color="#d3d3d3" size="25"
										v-show="!item.isSelected"></uni-icons>
									<uni-icons class="checkbox-icon" type="checkbox-filled" color="#ff2d2de2" size="25"
										v-show="item.isSelected"></uni-icons>
								</view>
								<view class="address-item-mid-content">
									<view class="address-item-top-row">
										<view class="base-address">
											{{item.province}} {{item.city}} {{item.district}}
										</view>
									</view>
									<view class="address-item-mid-row">
										<view class="address-item-name">
											{{item.name}}
										</view>
										<view class="address-item-phone">
											{{item.phone}}
										</view>
									</view>
									<view class="address-item-bottom-row">
										<view class="address-item-info-text">
											详细地址：
										</view>
										<view class="address-item-info-detail">
											{{item.address}}
										</view>
									</view>
								</view>
								<view class="address-item-right-content">
									<view class="icon-box">
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="address-btn-box">
			<view class="address-btn" @click="sureAddress()">
				确定
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onBeforeMount,
		onMounted,
		onUnmounted,
		watch,
		watchEffect,
		computed
	} from 'vue';

	import {
		sharedState,
		updateState
	} from '@/common/store.js'
	import {
		onShow,
		onHide,
		onUnload,
		onLoad
	} from '@dcloudio/uni-app';
	/**
	 * 地址测试data
	 */
	let addressList = ref([]);

	let selectAddressObj = ref({});

	let displayAddressList = ref([]);
	
	let userId = ref(0);
	//返回个人页面
	let backPerson = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	const choose = (id) => {
		displayAddressList.value = displayAddressList.value.map(item => {
			if (item.id === id) {
				return {
					...item,
					isSelected: true
				};
			} else {
				return {
					...item,
					isSelected: false
				};
			}
		});
		selectAddressObj.value = addressList.value.find(addr=> addr.id == id);
		console.log("dsadadsada",selectAddressObj.value);
	};
	
	const getAddrList= (userId)=>{
		uni.request({
			url: `/st/addrDetail/listByUserId/${userId}`,
			method: "GET",
			success: (res) => {
				console.log(res.data);
				if (res.data.code == 2000) {
					addressList.value = res.data.data;
					addressList.value.forEach(item => {
						displayAddressList.value.push({
							...item,
							isSelected: false
						});
					})
				} else {
		
				}
			},
			fail: () => {
		
			}
		})
	}

	let sureAddress = () => {
		uni.setStorage({
			key: 'selectAddress',
			data: selectAddressObj.value,
			success: function() {
				console.log('数据存储成功');
				uni.navigateTo({
					url: '/pages/orderbilling/orderbilling'
				});
			},
			fail: function(err) {
				console.error('数据存储失败', err);
			}
		});
	}

	onBeforeMount(() => {
		
		uni.getStorage({
			key: 'userLogin',
			success: function(res) {
				userId.value = res.data.id;
				
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
		getAddrList(userId.value);
		// clearStorage();
		uni.getStorage({
			key: 'saveAddress',
			success: function(res) {
				console.log('获取的数据:', res.data);
				addressList.value.data.list = res.data;
				console.log(addressList.value.data.list);
				addressList.value.data.list.forEach(item => {
					displayAddressList.value.push({
						...item,
						isSelected: false
					});
				})
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});

		uni.getStorage({
			key: 'selectAddress',
			success: function(res) {
				console.log('获取的地址数据:', res.data);
				choose(res.data.id);
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
	})



	const clearStorage = () => {
		uni.clearStorage({
			success: function() {
				console.log('本地存储已清除');
				msgType.value = 'success';
				messageText.value = '本地存储已清除';
				messageToggle('success');
				// 清除后重置相关数据
				spectatorList.value = [];
				formData.value = {
					spectatorName: "",
					spectatorIdCardType: "请选择证件类型",
					spectatorIdNumber: "",
					spectatorphone: ""
				};
			},
			fail: function(err) {
				console.error('清除本地存储失败', err);
				msgType.value = 'error';
				messageText.value = '清除本地存储失败';
				messageToggle('error');
			}
		});
	};
</script>

<style lang="scss" scoped>
	.address-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;
		color: #333;

		.address-header {
			top: 0px;
			width: 100%;
			height: 50px;
			display: flex;
			position: fixed;
			z-index: 1000;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 0px 4px 0px #d3d3d3;

			.title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}

			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;

			}
		}


		.address-content {
			width: 100%;
			height: auto;
			background: #f8f8fe;
			margin-top: 50px;
			float: left;
			padding: 0px 15px;
			box-sizing: border-box;

			.address-box {
				width: 100%;
				height: 110px;
				margin: 15px 0px;
				background: #fff;
				box-shadow: 0px 0px 6px 0px #ddd;
				border-radius: 5px;

				.address-item {
					width: 100%;
					height: 110px;
					box-sizing: border-box;
					padding: 10px 15px;

					.address-item-left-content {
						width: 30px;
						height: 90px;
						float: left;

						.uncheckbox-icon {
							line-height: 90px;
						}

						.checkbox-icon {
							line-height: 90px;
						}
					}

					.address-item-mid-content {
						width: calc(100% - 60px);
						height: 100%;
						float: left;

						.address-item-top-row {
							width: auto;
							height: 30px;
							line-height: 30px;
							color: #999999;
							font-size: 12px;

							.base-address {
								width: auto;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.address-item-mid-row {
							width: auto;
							height: 30px;
							line-height: 30px;

							.address-item-name {
								width: auto;
								height: 30px;
								float: left;
								line-height: 30px;
								font-size: 14px;
								font-weight: bold;
							}

							.address-item-phone {
								width: auto;
								height: 30px;
								float: left;
								line-height: 30px;
								font-size: 14px;
								padding-left: 15px;
							}
						}

						.address-item-bottom-row {
							width: auto;
							height: 30px;
							line-height: 30px;
							color: #999999;
							font-size: 12px;

							.address-item-info-text {
								width: auto;
								float: left;
							}

							.address-item-info-detail {
								width: auto;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

					}

					.address-item-right-content {
						width: auto;
						height: 60px;
						float: right;

						.icon-box {
							width: auto;
							height: 60px;
							float: right;
							box-sizing: border-box;
							padding: 35px 0px 5px 0px;

							.icon-edit {
								width: 20px;
								height: 20px;
							}
						}
					}

				}
			}

			.address-box:last-child {
				margin-bottom: 100px;
			}


		}

	}

	.address-btn-box {
		width: 100%;
		height: 80px;
		background: #fff;
		box-sizing: border-box;
		padding: 20px 15px;
		position: fixed;
		bottom: 0px;
		box-shadow: 0px 0px 4px 0px #d3d3d3;

		.address-btn {
			width: 100%;
			height: 40px;
			font-size: 14px;
			background: #ff2d2de2;
			color: #fff;
			border-radius: 4px;
			line-height: 40px;
			text-align: center;
		}
	}
</style>